xy 12:00:48
<template>
   <!-- 底部部分 -->
    <footer class="footer">
      <span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
      <!-- template 中可以不写 this -->
    <!-- 在事件处理函数中不能写 this -->
    <!-- 结论: template 中都不写 this -->
      <ul class="filters" @click="$emit('changeType',type)">
        <!-- 人为定义三个状态 自己定义 -->
        <li>
          <a @click.prevent=" type = 'all'"
           :class="{selected:type === 'all'}" 
           href="#/">全部</a>
        </li>
        <li>
          <a @click.prevent="type='active'"
          :class="{selected:type === 'active'}" 
           href="#/active">进行中</a>
        </li>
        <li>
          <a @click.prevent="type='completed'"
          :class="{selected:type === 'completed'}" 
          href="#/completed">已完成</a>
        </li>
      </ul>
      <button 
      @click="hClear"
      v-show="showClear" class="clear-completed">清除已完成</button>
    </footer>
</template>

<script>
export default {
name:'TodoFooter',
props:{
  list:{
    type:Array,
    required:true,
  }
},
  data() {
    return {
      type:'all'
    };
  },
methods: {
   hClear(){
     // 子传父, 交给父组件来删除已完成的任务
      // 不需要传递任何数据, 只需要让父组件帮忙清除所有已完成的任务即可
      // 理解为通知父组件干活了! 不用传递任何数据
    this.$emit('clearDone')
   }
  },

computed:{
   leftCount(){
      return this.list.length
    },
    showClear(){
//循环获取list中所有的元素isDone状态
//只要有一个是true就返回true
return this.list.some(item=>item.isDone)
},
}

};
</script>

<style lang="scss" scoped>

</style>
